export function createChartOption(chartData, fishingGrounds, colors) {
  // 为每个渔场创建一个系列，但每个系列只显示对应渔场的数据
  const series = chartData.map((item, index) => {
    const data = new Array(chartData.length).fill(null)
    data[index] = item.value
    
    return {
      name: item.name,
      type: 'bar',
      data: data,
      itemStyle: {
        color: colors[index],
        borderRadius: [4, 4, 0, 0] // 顶部圆角
      },
      barWidth: '60%',
      barCategoryGap: '40%',
      label: {
        show: false // 不显示标签
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: colors[index]
        }
      }
    }
  })

  // X轴数据（渔场名称）
  const xAxisData = chartData.map(item => item.name)

  return {
    color: colors,
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(189, 219, 241, 0.9)',
      borderColor: 'rgba(44, 81, 153, 1)',
      borderWidth: 1,
      textStyle: {
        color: '#23457f',
        fontSize: 12
      },
      formatter: (params) => {
        if (params.value === null || params.value === undefined) {
          return ''
        }
        return `<div style="padding: 4px;">
          <div style="font-weight: bold; margin-bottom: 4px;">${params.name}</div>
          <div>捕捞量：<span style="font-weight: bold; color: ${params.color};">${params.value.toLocaleString()} 吨</span></div>
        </div>`
      }
    },
    legend: {
      data: fishingGrounds,
      left: '2%',
      top: 'center',
      orient: 'vertical',
      itemGap: 12,
      textStyle: {
        color: '#fff',
        fontSize: 11
      },
      itemStyle: {
        opacity: 1
      },
      itemWidth: 15,
      itemHeight: 8,
      width: '18%'
    },
    grid: {
      left: '22%',
      right: '5%',
      top: '5%',
      bottom: '8%',
      containLabel: false
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLine: {
        lineStyle: {
          color: 'rgba(44, 81, 153, 1)'
        }
      },
      axisLabel: {
        show: false // 不显示X轴标签
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      name: '捕捞量(吨)',
      nameTextStyle: {
        color: '#bddbf1',
        fontSize: 11,
        padding: [0, 0, 0, 8]
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#bddbf1',
        fontSize: 10
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(44, 81, 153, 0.5)',
          type: 'dashed'
        }
      }
    },
    series: series
  }
}

